<template>
    <h3>侦听器</h3>
    <p>{{ message }}</p>
    <!-- <button v-on:click="updateData">修改数据</button> -->
    <button @click="updateData">修改数据</button>
</template>

<script>
import { callWithAsyncErrorHandling } from 'vue';

export default {
    data() {
        return {
            message: "Hello"
        }
    },
    methods: {
        updateData() {
            this.message = "World"
        }
    },
    watch:{
        //newValue：改变之后的值
        //oldValue：改变之前的值
        //函数名必须与侦听的数据对象保持一致
        message(newValue,oldValue){
            console.log(newValue,oldValue)
        }
    }
}
</script>